<script  lang="tsx">
import { defineComponent, PropType } from "vue";

import { API } from "@/global";
import { _tableTemplate } from "./table";

/*
  全局Table 公共组件 
*/
export default defineComponent({
  props: {
    columns: { type: Array as PropType<TC.ITableItem[]>, default: [] },
    tableData: { type: Array, default: [] },
    pageShow: { type: Boolean, default: true, description: '是否显示分页器' },
    initData: { type: Function, default: () => { } },
    params: { type: Object as PropType<API.IParams>, default: { page: 1, page_size: 15 } },
    count: { type: Number, default: 0 },
    loading: { type: Boolean, default: false },
  },

  setup(props, { slots }: { slots: any }) {
    return _tableTemplate(props, slots)
  },
});
</script>

<style lang='scss' >
.table {
  @extend %table-page;

  .t-search {
    width: 100%;
    display: flex;
    align-items: flex-start;

    .searchinfo {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .s-left {
        display: flex;
        margin-left: -10px;
      }

      .s-right {
        display: flex;

        .el-input__inner {
          width: 250px;
        }
      }
    }
  }

  .t-body {
    @extend %center;
  }

  .table-main {
    width: 100%;
  }

  .t-label {
    color: #777;
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      margin-top: 5.2px;
      margin-right: 8px;
    }
  }

  .pagination {
    margin-top: 30px;
    @extend %center;
    @include setInputHeight(32px);


    .el-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
    }


  }

  thead tr th {
    background: var(--bg-color-gary) !important;
  }
}
</style>